<template>
  <a-layout class="home-container">
    <!-- sider -->
    <a-layout-sider v-model="collapsed">
      <!-- menu -->
      <Menu />
    </a-layout-sider>
    <a-layout>
      <!-- header -->
      <a-layout-header style="background: #fff; padding: 0">
        <SliderNav :collapsed.sync="collapsed" />
      </a-layout-header>
      <!-- content -->
      <a-layout-content :style="{
          margin: '24px 16px',
          // padding: '24px',
          background: '#fff',
          minHeight: '280px'
        }
      ">
        <RouterView></RouterView>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import Menu from './Menu.vue';
import SliderNav from './SliderNav.vue';

export default {
  name: 'Home',
  components: {
    Menu,
    SliderNav,
  },
  data() {
    return {
      collapsed: false,
    };
  },
};
</script>

<style lang="less" scoped>
.home-container{
  width: 100vw;
  height: 100vh;
}
</style>
